<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <style>
        .父级盒子 {
            width: 500px; /* 宽高 背景色 */
            height: 500px;
            background-color: pink;
        }

        .子级盒子 {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>

</head>
<body>
<h3>阻止事件冒泡</h3>
<p>
    问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素 <br>
    需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡 <br>
    前提：阻止事件冒泡需要拿到事件对象
</p>
<p>
    语法: <br>
    事件对象.stopPropagation()
</p>
<p>
    注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效 <br>
</p>
<hr>
<p>
    我们某些情况下 需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
</p>
<p>
    语法: <br>
    事件对象.preventDefault() // 阻止默认行为
</p>

<div class="父级盒子">
    <div class="子级盒子">子级盒子</div>
</div>

<a href="https://www.bilibili.com/">B站,点击跳转</a>


<script>
    //获取 DOM元素
    const 父级盒子 = document.querySelector('.父级盒子')
    const 子级盒子 = document.querySelector('.子级盒子')

    /*
    document --> 父级盒子 --> 子级盒子  //  事件 捕获阶段
    子级盒子 --> 父级盒子 --> document  // 事件 冒泡阶段
     */

    // 事件冒泡
    document.addEventListener('click', function () {
        alert('我是, 整个页面')
    },)
    父级盒子.addEventListener('click', function () {
        alert('我是,父级盒子')
    },)
    子级盒子.addEventListener('click', function (事件对象) {
        alert('我是,子级盒子')
        // 阻止 事件冒泡
        事件对象.stopPropagation()
        事件对象.preventDefault()
    },)
    // 点击 子级盒子, 事件冒泡不会在 向父级传播


    // 这里是,阻止链接点击 默认自动跳转
    const 链接 = document.querySelector('a')
    链接.addEventListener('click', function (事件对象) {
        // 阻止默认行为
        事件对象.preventDefault()
    },)
</script>

</body>
</html>